<template>
  <ElDrawer
    class="table-column-filter"
    :visible="visible"
    title="表格设置"
    @update:visible="val => $emit('update:visible', val)">
    <ElTable :data="columns" border>
      <ElTableColumn label="列名">
        <template #default="{ row }">
          {{ row.label }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="隐藏" align="center">
        <template #default="{ row }">
          <ElCheckbox v-model="row.hide" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="冻结" align="center">
        <template #default="{ row }">
          <ElCheckbox v-model="row.fixed" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="过滤" align="center">
        <template #default="{ row }">
          <ElCheckbox v-model="row.filterable" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="排序" align="center">
        <template #default="{ row }">
          <ElCheckbox
            v-model="row.sortable"
            :title="!row.allowSort ? '该列不支持排序!' : null"
            :disabled="!row.allowSort" />
        </template>
      </ElTableColumn>
    </ElTable>
  </ElDrawer>
</template>

<script>
  export default {
    name: 'TableColumnFilter',
    props: {
      columns: {
        type: Array,
        default: () => []
      },
      visible: Boolean
    }
  }
</script>

<style lang="scss">
  .table-column-filter {
    .el-drawer__body {
      padding: 10px;
    }

    .el-drawer__header {
      min-height: 20px;
      margin-bottom: 0;
      padding: 16px 10px 16px 24px;
      border-bottom: 1px solid #f0f0f0;
    }
  }
</style>
